<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用Layui</title>
    <link rel="stylesheet" href="/Public/layui/css/layui.css">

    <style>
        .mybox {
            width: 600px;
            margin: 0 auto;
            background: #F8F8F8;
            padding-bottom: 30px;
        }
        
        h1 {
            line-height: 80px;
            text-align: center;
            font-size: 20px;
            font-weight: 400;
            background: #E8E8E8;
            margin-bottom: 20px;
        }
        
        .layui-form-item .layui-input-inline {
            width: 300px;
        }
    </style>
</head>

<body>
    <div class="mybox">
        <h1>用户注册</h1>
        <form class="layui-form" action="" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">辅助文字</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>


    <script src="/Public/layui/layui.js"></script>
    <script>
        //一般直接写在一个js文件中
        layui.use(['jquery', 'layer', 'form'], function() {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form();

            //监听提交

            form.on('submit(formDemo)', function(data) {
                ii = layer.msg('Loading...', {
                    icon: 16,
                    time: 10000
                });

                $.post("/home/index/reg_post", data.field, function(ret) {
                    layer.close(ii);
                    console.log(ret);
                    if (ret.status) {
                        layer.msg(ret.info, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.location.href = '/home/index/login.html';
                        });
                    } else {
                        layer.msg(ret.info, {
                            icon: 2,
                            time: 1000
                        });
                    }
                });
                return false;
            });

        });
    </script>

</body>

</html>